<template>
  <div class="my-task">
    <div class="title flex between">
      <span>我的任务</span>
      <div class="icon-box">
        <svg
          t="1694828802093"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4171"
          width="16"
          height="16"
        >
          <path
            d="M341.333333 298.666667h384V213.333333h42.666667v85.333334h128v554.666666H170.666667V298.666667h128V213.333333h42.666666v85.333334zM213.333333 341.333333v469.333334h640V341.333333H213.333333z m213.333334 85.333334v42.666666H298.666667v-42.666666h128z m170.666666 0v42.666666h-128v-42.666666h128z m170.666667 0v42.666666h-128v-42.666666h128z m-341.333333 256v42.666666H298.666667v-42.666666h128z m170.666666 0v42.666666h-128v-42.666666h128z m170.666667 0v42.666666h-128v-42.666666h128z m-341.333333-128v42.666666H298.666667v-42.666666h128z m170.666666 0v42.666666h-128v-42.666666h128z m170.666667 0v42.666666h-128v-42.666666h128z"
            fill="#ffffff"
            p-id="4172"
          ></path>
        </svg>
      </div>
    </div>
    <div class="body">
      <!-- 封装为组件 -->
      <MyTaskItem Itemcolor="--red">
        <!-- 传递不同的icon -->
        <svg
          t="1694829249755"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5771"
          width="18"
          height="18"
        >
          <path
            d="M529.210368 978.506752c-65.563648 0-129.174528-12.845056-189.069312-38.177792C282.299392 915.8656 230.356992 880.8448 185.754624 836.243456c-44.601344-44.601344-79.62112-96.544768-104.085504-154.386432-25.332736-59.89376-38.178816-123.506688-38.178816-189.07136 0-65.563648 12.845056-129.174528 38.178816-189.069312 24.464384-57.841664 59.48416-109.784064 104.085504-154.386432s96.544768-79.62112 154.386432-104.085504C400.034816 19.912704 463.64672 7.066624 529.210368 7.066624s129.175552 12.845056 189.070336 38.177792c57.84064 24.464384 109.78304 59.48416 154.385408 104.085504s79.622144 96.544768 104.086528 154.386432c25.33376 59.89376 38.178816 123.505664 38.178816 189.069312 0 54.377472-8.92416 107.776-26.523648 158.708736-17.004544 49.20832-41.756672 95.187968-73.573376 136.665088-0.900096 1.199104-8.650752 11.462656-16.606208 20.110336-2.845696 3.241984-15.791104 16.637952-35.888128 17.38752-10.604544 0.408576-26.78272-2.783232-43.58144-20.153344L510.199808 499.828736l0-377.50784c0-10.326016 8.370176-18.697216 18.697216-18.697216 10.326016 0 18.697216 8.370176 18.697216 18.697216l0 361.91744 297.787392 295.00416 0.155648 0.161792c3.948544 4.105216 9.777152 8.984576 15.217664 8.891392 4.617216-0.075776 8.537088-3.837952 9.24672-4.560896l0.41984-0.549888 0.132096-0.06144c7.013376-7.597056 14.34112-17.364992 14.413824-17.462272l0.139264-0.183296c29.396992-38.303744 52.260864-80.761856 67.960832-126.195712 16.239616-46.99648 24.474624-96.284672 24.474624-146.496512 0-60.531712-11.850752-119.242752-35.224576-174.501888-22.5792-53.384192-54.908928-101.331968-96.08704-142.512128-41.18016-41.18016-89.127936-73.50784-142.513152-96.08704-55.261184-23.373824-113.972224-35.224576-174.50496-35.224576S409.967616 56.310784 354.707456 79.683584c-53.384192 22.5792-101.331968 54.908928-142.512128 96.08704s-73.50784 89.127936-96.08704 142.512128c-23.373824 55.26016-35.2256 113.972224-35.2256 174.502912 0 60.532736 11.851776 119.2448 35.224576 174.50496 22.5792 53.384192 54.908928 101.331968 96.08704 142.512128s89.127936 73.506816 142.512128 96.086016c55.259136 23.373824 113.9712 35.224576 174.502912 35.224576 73.097216 0 145.6128-17.9712 209.731584-51.975168 5.942272-3.380224 69.69856-34.064384 137.851904-39.227392 10.314752-0.761856 19.275776 6.934528 20.056064 17.231872 0.780288 10.29632-6.934528 19.274752-17.231872 20.056064-61.24032 4.637696-121.65632 34.137088-122.354688 34.537472l-0.533504 0.294912C687.169536 958.978048 608.493568 978.506752 529.210368 978.506752z"
            fill="#ffffff"
            p-id="5772"
          ></path>
        </svg>
      </MyTaskItem>
      <MyTaskItem Itemcolor="--yellow">
        <!-- 传递不同的icon -->
        <svg
          t="1694830267955"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7140"
          width="18"
          height="18"
        >
          <path
            d="M512 97c-11.4 0-20.8 9.3-20.8 20.8v166c0 11.4 9.3 20.8 20.8 20.8s20.8-9.3 20.8-20.8v-166c0-11.5-9.4-20.8-20.8-20.8zM247.9 218.6c-8.1-8.1-21.3-8.1-29.3 0s-8.1 21.3 0 29.3L336 365.3c8.1 8.1 21.3 8.1 29.3 0s8.1-21.3 0-29.3L247.9 218.6zM304.5 512c0-11.4-9.3-20.8-20.8-20.8h-166c-11.4 0-20.8 9.3-20.8 20.8s9.3 20.8 20.8 20.8h166c11.5 0 20.8-9.4 20.8-20.8zM335.9 658.7L218.6 776.1c-8.1 8.1-8.1 21.3 0 29.3 8.1 8.1 21.3 8.1 29.3 0L365.3 688c8.1-8.1 8.1-21.3 0-29.3s-21.3-8-29.4 0zM512 719.5c-11.4 0-20.8 9.3-20.8 20.8v166c0 11.4 9.3 20.8 20.8 20.8s20.8-9.3 20.8-20.8v-166c0-11.5-9.4-20.8-20.8-20.8zM688.1 658.7c-8.1-8.1-21.3-8.1-29.3 0s-8.1 21.3 0 29.3l117.4 117.4c8.1 8.1 21.3 8.1 29.3 0 8.1-8.1 8.1-21.3 0-29.3L688.1 658.7zM906.3 491.3h-166c-11.4 0-20.8 9.3-20.8 20.8s9.3 20.8 20.8 20.8h166c11.4 0 20.8-9.3 20.8-20.8s-9.4-20.8-20.8-20.8zM688.1 365.3l117.4-117.4c8.1-8.1 8.1-21.3 0-29.3s-21.3-8.1-29.3 0L658.7 335.9c-8.1 8.1-8.1 21.3 0 29.3s21.3 8.1 29.4 0.1z"
            p-id="7141"
            fill="#ffffff"
          ></path>
        </svg>
      </MyTaskItem>
      <MyTaskItem Itemcolor="--theme"></MyTaskItem>
    </div>
  </div>
</template>

<script setup lang="ts">
import MyTaskItem from "@/components/mytask-item.vue";
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 20px;
  span {
    font-size: 20px;
    font-weight: 600;
  }
  .icon-box {
    width: 32px;
    height: 32px;
    background-color: var(--theme);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
    border-radius: 5px;
    cursor: pointer;
  }
}
</style>
